/*----------------box.less(start)--------------*/
.box{
	display:-moz-box;
	display:-webkit-box;
	display: box;

	display:-webkit-flex;
	display:flex;
}
.box-center,.box-middlecenter,.text-center{
	-moz-box-pack:center;
	-webkit-box-pack:center;
	box-pack:center;

	-webkit-justify-content:center;
	justify-content:center;
}
.box-right{
	-moz-box-pack:end;
	-webkit-box-pack:end;
	box-pack:end;
	
	-webkit-justify-content:flex-end;
	justify-content:flex-end;
}
.box-middle,.box-middlecenter{
	-moz-box-align:center;
	-webkit-box-align:center;
	box-align:center;

	-webkit-align-items:center;
	align-items:center;
}
.box-top{
	-moz-box-align:start;
	-webkit-box-align:start;
	box-align:start;

	-webkit-align-items:flex-start;
	align-items:flex-start;
}
.box-bottom{
	-moz-box-align:end;
	-webkit-box-align:end;
	box-align:end;

	-webkit-align-items:flex-end;
	align-items:flex-end;
}
.box-vertical{
	-moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;

	-webkit-flex-flow:column;
    flex-flow:column;
}
.box-horizontal{
	-moz-box-orient:horizontal;
	-webkit-box-orient:horizontal;
    box-orient:horizontal;

    -webkit-flex-flow:row;
    flex-flow:row;
}
.box-shrink>div,.box-shrink>button{
	width:100%;
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
}
.box-flex-1{
	-moz-box-flex:1.0;
	-webkit-box-flex:1.0;
	box-flex:1.0;

	-webkit-flex:1;
	flex:1;
}
.box-flex-2{
	-moz-box-flex:2.0;
	-webkit-box-flex:2.0;
	box-flex:2.0;

	-webkit-flex:2;
	flex:2;
}
.box-flex-3{
	-moz-box-flex:3.0;
	-webkit-box-flex:3.0;
	box-flex:3.0;

	-webkit-flex:3;
	flex:3;
}

/*flex布局方式*/
.flex{
	display:-webkit-flex;
	display:flex;
}
.flex-1{
	-webkit-flex:1;
	flex:1;
}
.flex-2{
	-webkit-flex:2;
	flex:2;
}
.flex-3{
	-webkit-flex:3;
	flex:3;
}
.flex-4{
	-webkit-flex:4;
	flex:4;
}
.flex-5{
	-webkit-flex:5;
	flex:5;
}
.flex-6{
	-webkit-flex:6;
	flex:6;
}
.flex-7{
	-webkit-flex:7;
	flex:7;
}
.flex-8{
	-webkit-flex:8;
	flex:8;
}
.flex-9{
	-webkit-flex:9;
	flex:9;
}
/*--------------flex-flow--------------*/
/*横向*/
.flex-row{
	flex-flow:row;/*横向排列*/
}
.flex-row-wrap{
	flex-flow:row wrap;/*超过部分将换行*/
}
.flex-row-reverse{
	flex-flow:row-reverse;/*横向倒序排列*/
}
.flex-row-reverse-wrap{
	flex-flow:row-reverse wrap;/*超过部分将换行*/
}
/*纵向*/
.flex-col{
	flex-flow:column;/*纵向排列*/
}
.flex-col-wrap{
	flex-flow:column wrap;/*超过部分将换行*/
}
.flex-col-reverse{
	flex-flow:column-reverse;/*纵向倒序排列*/
}
/*--------------align-content--------------*/
.align-stretch{
	align-content:stretch;/*拉伸*/
}
.align-start{
	align-content:flex-start; /*顶部对齐*/
}
.align-center{
	align-content:center; /*垂直居中*/
}
.align-end{
	align-content:flex-end;/*底部对齐*/
}
.align-between{
	align-content:space-between; /*垂直两端分布*/
}
.align-around{
	align-content:space-around; /*垂直居中分布*/
}
/*--------------justify-content--------------*/
/*配合flex-row-wrap一同使用*/
.justify-stretch{
	justify-content:stretch;/*拉伸*/
}
.justify-start{
	justify-content:flex-start; /*左对齐*/
}
.justify-center{
	justify-content:center; /*水平居中*/
}
.justify-end{
	justify-content:flex-end; /*右对齐*/
}
.justify-between{
	justify-content:space-between; /*水平两端分布*/
}
.justify-around{
	justify-content:space-around; /*水平居中分布*/
}
/*--------------align-items--------------*/
.align-items-stretch{
	align-items:stretch;/*拉伸*/
}
.align-items-center{
	align-items:center; /*垂直居中*/
}
.align-items-start{
	align-items:flex-start; /*顶部对齐*/
}
.align-items-end{
	align-items:flex-end; /*底部对齐*/
}
/*--------------align-self--------------*/
.align-self-stretch{
	align-self:stretch;/*拉伸*/
}
.align-self-start{
	align-self:flex-start; /*顶部对齐*/
}
.align-self-center{
	align-self:center; /*垂直居中*/
}
.align-self-end{
	align-self:flex-end; /*底部对齐*/
}
/*----------------box.less(end)--------------*/